<script type="text/javascript" src="${basePath}/js/tds-lun.js"></script>
<script type="text/javascript">
$(function () {
	$.ajax({
		type : "get",
		url : baseURL + "/monitor/pg/status",
		dataType : "json",
		success : function(json) {
			if (!json || json.result != "success") { return; }
			var data = [];
			var pgs = json.data.numPgByStates;
			for (var i = 0; i < pgs.length; i++) {
				data.push({name: pgs[i].name, y: pgs[i].num});
			}
		    $('#container').highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: null,
		            plotShadow: false,
		            type: 'pie'
		        },
		        title: {
		            text: 'PG Summary'
		        },
		        tooltip: {
		            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		        }, 
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true,
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
		                    style: {
		                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                    }
		                }
		            }
		        },
		        series: [{
		            name: "Brands",
		            colorByPoint: true,
		            keys: ["name", "y"],
		            data: data
		        }]
		    });
		}
	});
	$.ajax({
		type : "get",
		url : baseURL + "/monitor/pg/status",
		dataType : "json",
		success : function(json) {
			if (!json || json.result != "success") { return; }
			var data = [];
			var rawUsed = json.data.rawUsed;
			var rawAvail = json.data.rawAvail;
			var raw = json.data.raw;
		    $('#container02').highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: null,
		            plotShadow: false,
		            type: 'pie'
		        },
		        title: {
		            text: 'Capacity Summary'
		        },
		        tooltip: {
		            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		        }, 
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: true,
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
		                    style: {
		                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                    }
		                }
		            }
		        },
		        series: [{
		            name: "Brands",
		            colorByPoint: true,
		            data:[
		                  ['Capacity Used', rawUsed],
		                  ['Capacity Avail', rawAvail],
		                  ]
		        }]
		    });
		}
	});
});
</script>

<div class="" id="container">
</div>	
<div class="" id="container02">
</div>	

